<template>
  <div id="uesrInfo">
      <!-- 头部 -->
        <my-header fixed title='编辑资料'>
            <a class="back-black" slot='left' @click='$router.go(-1)'></a>
        </my-header>
        <!-- 正文 -->
        <div class="content">
            <div class="container" style="background:#f5f5f5">
                <div class="group">
                    <ul>
                        <li  @click="fileClick">
                            <div class="list_box">
                                <span>头像</span>
                            </div>
                            <div class="userInfo-avatar">
                                <img :src='userInfo.avatar'>
                                <img src="~@/assets/img/p_arrow.png">
                            </div>
                        </li>
                        <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none">
                        <li>
                            <div class="list_box">
                                <span>用户名</span>
                            </div>
                            <div class="userInfo-input">
                                <input type="text" v-model='userInfo.nickname'>
                                <img src="~@/assets/img/p_arrow.png">
                            </div>
                        </li>
                        <li>
                            <div class="list_box">
                                <span>介绍</span>
                            </div>
                            <div class="userInfo-input">
                                <input type="text" v-model='userInfo.introduction' >
                                <img src="~@/assets/img/p_arrow.png">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="group">
                    <ul>
                        <li>
                            <div class="list_box">
                                <span>性别</span>
                            </div>
                            <div class="userInfo-input">
                                <select v-model='userInfo.sex'>
                                   <option disabled :value="0">请选择</option>
                                   <option :value='1'>男</option>
                                   <option :value='2'>女</option>
                                </select>
                                <img src="~@/assets/img/p_arrow.png">
                            </div>
                        </li>
                        <li>
                            <div class="list_box">
                                <span>生日</span>
                            </div>
                            <div class="userInfo-input">
                                <input type="text"  v-model='userInfo.birthday'>
                                <img src="~@/assets/img/p_arrow.png">
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="btnList">
                  <button class="app-btn app-btn-login"  @click.stop='changUserInfo'>保存</button>
                </div>
            </div>
        </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    name: 'uesrInfo',
    data() {
        return {
            GPSLocation: {},
            size: 0
        }
    },
    computed: {
        ...mapGetters('user', [
            'userInfo'
        ])
    },
    mounted () {
        console.log(this.userInfo)
    },
    methods: {
        ...mapMutations('login', [
            'set_isLogin'
        ]),
        ...mapMutations('user', [
            'set_userInfo'
        ]),
        ...mapActions('collect', [
            'post_upload_data'
        ]),
        ...mapActions('user', [
            'set_userInfo_data'
        ]),
        fileClick () {
          document.getElementById('upload_file').click()
        },
        fileChange (el) {
          if (!el.target.files[0].size) return
          this.fileList(el.target.files)
          el.target.value = ''
        },
        fileList (files) {
          for (let i = 0; i < files.length; i++) {
            this.fileAdd(files[i])
          }
        },
        fileAdd (file) {
          this.size = this.size + file.size// 总大小
          let reader = new FileReader()
          reader.vue = this
          reader.readAsDataURL(file)
          reader.onload = function () {
            file.src = this.result
            this.vue.post_upload_data(file.src)
            .then(res => {
                if (res) {
                  this.vue.$toast({ message: res.msg, duration: 2000 })
                }
            })
            .catch(err => {
                console.log(err)
            })
            this.vue.imgList.push({
              file
            })
          }
        },
        fileDel (index) {
          this.size = this.size - this.imgList[index].file.size// 总大小
          this.imgList.splice(index, 1)
        },
        changUserInfo () {
          let params = {
            avatar: this.userInfo.avatar,
            nickname: this.userInfo.nickname,
            introduction: this.userInfo.introduction,
            sex: this.userInfo.sex,
            birthday: this.userInfo.birthday
          }
          console.log(params)
          this.set_userInfo_data(params)
          .then(res => {
              if (res) {
                    this.$toast({ message: res.msg, duration: 1500 })
              }
          })
          .catch(err => {
              console.log(err)
          })
        }
    }
}
</script>
<style lang='stylus'>
#uesrInfo{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 16px;
    .group{
        padding-top: 0.5rem;
        ul{
            li{
                color: #333;
                min-height: 1.5rem;
                background #fff;
                line-height : 1.5rem;
                padding-left: 0.5rem;
                padding-right: 0.25rem;
                position relative;
                display: flex;
                display: -webkit-flex;
                justify-content: space-between;
                align-items: center;
               .list_box{
                 display: flex;
                 display: -webkit-flex;
                 align-items: center;;
                 img{
                   width: 25px;
                   height: 25px;
                 }
               }
               img{
                    width: 35px;
                    height: 35px;
               }
               .outbtn{
                   text-align : center;
                   width: 100%;
                   span{
                       width: 100%;
                       padding : 0;
                       color : #f23030;
                   }
               }
               .userInfo-avatar{
                    text-align : right ;
                    width: 80%;
                    text-align: right;
                    line-height: 40px;
               }
               .userInfo-input{
                    width: 70%;
                    text-align: right;
                    line-height: 40px;
                    input{
                        height : 1rem;
                        text-align : right;
                        padding : 0 5px;
                        width: 60%;
                        outline: none;
                    }
                    select {
                      outline: none;
                      font-size: 13px;
                    }
               }
            }
            li:after{
                position: absolute;
                right: 0;
                bottom: 0;
                left: 0px;
                height: 1px;
                content: '';
                background-color: #f3f3f3;
            }
            li:last-child:after{
                display : none;
            }

        }
    }
    .btnList{
        margin-top: 50px;
        .app-btn{
            width : 80%;
            height: 40px;
            border-radius: 100px;
            margin : 0 auto;
            display : block;
            font-size: 14px;
            background : none;
        }
        .app-btn-login{
            background : #f48081;
            color: #fff;
        }
        .app-btn-reg{
            border: solid 1px #f48081;
            color: #f48081;
        }
    }
}
</style>
